iT邦幫忙

DAY 24
1

30 天學會 Web 前端效能優化系列 第 24

[30 天學會 Web 前端效能優化] 24. 透過專案複習前面的知識3 - 合併 JS

  • 分享至 

  • xImage
  •  

現在我們已經針對測試專案做了移除 document.write 的優化了,然而現在還有一個問題:Javascript 會阻擋 DOM 的建構。

麻煩的地方在於,第二個 JS 依賴於第一個 JS ,因此如果我們將兩個 script tag 都加上 async keyword 會發生有時候正常有時候錯誤的情況。

解決方法並不困難,只要將兩個檔案合併成一個,然後再加上 async keyword 就 OK 了。事實上這個動作也是 Web Performance 調校的 Best Practice 之一:減少 Request ,越少 Request 越好。

首先請開啟一個新 JS file(如下圖的 a.js),然後將第一個 JS file 的內容全部複製貼到新檔案中:

接著為了避免錯誤,請按兩下 Enter 換行,再把第二個 JS file 的內容複製過來:

最後只要把之前那兩個 script tag 刪除,換成這一個新的並且加上 async keyword 就完成了,如下:

<script src="a.js" async></script>

事實上這個測試專案的總體 size 非常小,我在 Chorme 的 Dev tool 看到的數字是:75.6kb,而在我的電腦+網路環境下,完整 Render 總共花了 7.39s ,由此可見即使 page size 再小,開發者對於 Web Performance 沒有概念的話依然可能導致總體載入時間變得無比的慢,因此調校 Performance 可說是每一位開發者都必須具備的能力。


上一篇
[30 天學會 Web 前端效能優化] 23. 透過專案複習前面的知識2 - 監測 jank
下一篇
[30 天學會 Web 前端效能優化] 25. 透過專案複習前面的知識4 - compress JS & CSS
系列文
30 天學會 Web 前端效能優化30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言